<template>
  <a-drawer
    placement="top"
    :closable="false"
    :visible="addVisible"
    height="100%"
    wrapClassName="add-power"
    @close="closeTopDrawer"
    :destroyOnClose="true"
    :headerStyle="{
      background: '#f0f1f5',
      padding: '0 0.2rem 0 0.3rem',
      flexGrow: 0,
    }"
    :bodyStyle="{
      padding: '0.3rem 0 0 0',
      flexGrow: 1,
    }"
    :drawerStyle="{
      display: 'flex',
      flexDirection: 'column',
    }"
  >
    <template #title>
      <div class="head-box">
        <span>添加新安全</span>
        <div class="head-btn">
          <a-button @click="closeTopDrawer">取消</a-button>
          <a-button type="primary" class="save-btn" @click="saveAdd"
            >保存</a-button
          >
        </div>
      </div>
    </template>
    <div class="content-box">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="content-width">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="培训主题" prop="theme" required>
                <a-input v-model="form.theme" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="授课人" prop="lecturer" required>
                <a-input v-model="form.lecturer" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="培训对象" prop="trainees" required>
                <a-input v-model="form.trainees" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="培训内容" prop="content" required>
                <a-input v-model="form.content" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="培训时间" prop="trainingTime" required>
                <a-date-picker v-model="form.trainingTime" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="人数" prop="number" required>
                <a-input
                  v-model="form.number"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                label="培训地点"
                prop="trainingAddress"
                required
              >
                <a-input
                  v-model="form.trainingAddress"
                  class="input-width"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                label="培训部门"
                prop="trainingDepartment"
                required
              >
                <a-input
                  v-model="form.trainingDepartment"
                  class="input-width"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="上传课件" prop="coursewareUrl" required>
                <a-upload
                  :file-list="fileList"
                  :before-upload="uploadCheck"
                  :customRequest="ownUpload"
                  @change="handleChange"
                  :remove="removeFile"
                >
                  <a-button> <a-icon type="upload" /> 点击上传课件 </a-button>
                </a-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </div>
  </a-drawer>
</template>
  <script>
import { secureSaveSingle, upload } from "@/api/operationApi.js";
import moment from "moment";
export default {
  data() {
    return {
      form: {
        theme: "",
        lecturer: "",
        trainees: "",
        content: "",
        trainingTime: "",
        number: "",
        trainingAddress: "",
        trainingDepartment: "",
        coursewareUrl: "",
      },
      fileList: [],
      rules: {
        theme: [
          {
            required: true,
            message: "请填写培训主题",
            trigger: "blur",
          },
        ],
        lecturer: [
          {
            required: true,
            message: "请填写授课人",
            trigger: ["blur", "change"],
          },
        ],
        trainees: [
          {
            required: true,
            message: "请填写培训对象",
            trigger: ["blur", "change"],
          },
        ],
        content: [
          {
            required: true,
            message: "请填写培训内容",
            trigger: "blur",
          },
        ],
        trainingTime: [
          {
            required: true,
            message: "请填写培训时间",
            trigger: ["blur", "change"],
          },
        ],
        number: [
          {
            required: true,
            message: "请填写人数",
            trigger: ["blur", "change"],
          },
        ],
        trainingAddress: [
          {
            required: true,
            message: "请填写培训地点",
            trigger: "blur",
          },
        ],
        trainingDepartment: [
          {
            required: true,
            message: "请填写培训部门",
            trigger: "blur",
          },
        ],
        coursewareUrl: [
          {
            required: true,
            message: "请上传课件",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  props: {
    addVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    saveAdd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("params");
          const params = JSON.parse(JSON.stringify(this.form));
          params.trainingTime = moment(params.trainingTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          console.log(params);
          secureSaveSingle(params).then((res) => {
            this.$message.success("新增安全成功");
            this.$emit("reloadList");
            this.reset();
            this.$emit("update:addVisible", false);
          });
        }
      });
    },
    closeTopDrawer() {
      this.$emit("update:addVisible", false);
    },
    uploadCheck(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("上传文件不能大于10M");
      }
      return isLt10M;
      // if (imgType.includes(file.type)) {
      //   return true;
      // } else {
      //   this.$message.warning("请上传jpeg、png、gif类型的图片");
      //   return false;
      // }
    },
    handleChange(info) {
      console.log(info.file, info.fileList);
      this.fileList = info.fileList;
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name}上传成功`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name}上传失败`);
      }
    },
    ownUpload(options) {
      const formdata = {
        multipartFile: options.file,
      };
      upload(formdata).then((res) => {
        this.form.coursewareUrl = res.data;
        options.onSuccess(res, options.file);
      });
    },
    removeFile() {
      this.form.coursewareUrl = "";
      this.fileList = [];
    },
    reset() {
      this.fileList = [];
      this.form = {
        theme: "",
        lecturer: "",
        trainees: "",
        content: "",
        trainingTime: "",
        number: "",
        trainingAddress: "",
        trainingDepartment: "",
        coursewareUrl: "",
      };
    },
  },
};
</script>
  <style lang="less" scoped>
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ant-input {
      height: 32px;
    }
    .ant-form {
      height: 100%;
    }
    .input-width {
      width: 80%;
    }
    .content-width {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      /deep/.ant-form-item {
        margin-bottom: 10px;
        /deep/.ant-form-item-label {
          font-size: 12px;
          label {
            font-size: 14px;
          }
        }
      }
      /deep/.ant-form-explain {
        font-size: 12px;
      }
    }
  }
}
</style>